<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>"Battleship</title>
<link rel="stylesheet" href="css/style.css" type="text/css">
<link rel="stylesheet" href="css/login.css" type="text/css">
<link rel="stylesheet" href="css/lobby.css" type="text/css">
<link rel="stylesheet" href="css/rank.css" type="text/css">
<link rel="stylesheet" href="css/buttons.css" type="text/css">
<script src="http://code.jquery.com/jquery-1.7.1.min.js"
	type="text/javascript"></script>
<script type="text/javascript"
	src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script>
<script src="js/main.js" type="text/javascript"></script>
<script src="js/game.js" type="text/javascript"></script>
<script src="js/login.js" type="text/javascript"></script>
</head>
<body>

 
      
<div class="LobbyRank">
	<div class="Lobby">
		<table id="background-image" summary="Avaiable tables">
		    <thead>
		    	<tr>
		        	<th scope="col">Table name</th>
		            <th scope="col">Players</th>
		        </tr>
		    </thead>
		    <tfoot>
		    	<tr>
		        	 <td><img src="images/add.png" alt="Add table" onclick="newElement();"></td>
		        </tr>
		    </tfoot>
		    <tbody id="tableElement">
		    	<tr id="0" onclick="joinGame(this.id)">
		        	<td>Battlefield I</td>
		            <td>0</td>
		        </tr>
		    </tbody>
		</table>
	</div>
	
	<div class="rankingTable">
		<table id="gradient-style" summary="Table">
		    <thead>
		    	<tr>
		        	<th scope="col" >Player name</th>
		            <th scope="col"># of wins</th>
		        </tr>
		    </thead>
		    <tfoot>
		    </tfoot>
		    <tbody id="tableElement">
		    	<tr>
		        	<td>${FBName}</td>
		            <td>10</td>
		        </tr>
		    </tbody>
		</table>
	
	</div>
</div>
	
<div class="loginBox" id="loginBox">
	    <div class="subButton">
	    <a href="https://www.facebook.com/dialog/oauth?client_id=${FBAppID}&redirect_uri=${FBRedirect}&state=${FBState}"><img src="images/login.png" border="0" onclick=hideLogin()></a>
	</div>
	
	
	</div>
	

	
<div class="container" id="container">

	<div class="playfield">
		<div id="player" class="player"></div>
		<div class="opponent"></div>
	</div>
	
	
	<div class="settings">
		<div class="changeShip">
			<img class="bkwrd" alt="Back button" onclick='changeImage(-1);'>
			<img class="shp" alt="Ship" id="shp" src="images/minesweeper.png">
			<img class="fwrd" alt="Forward button" onclick='changeImage(1);'>
		</div>

		<div class="changeOrientation">
			<img class="bkwrd2" alt="Back button"  onclick='changeOrientation();'>
			<img class="orientation" alt="Orientation option" id="orientation" src="images/horizontal.png">
			<img class="fwrd2" alt="Forward button" onclick='changeOrientation();'>		
		</div>
		
		<div class="changeMode">
			<img class="bkwrd2" alt="Back button" onclick='changeMode();'>
			<img class="mode" alt="Mode option" id="mode" src="images/place.png">
			<img class="fwrd2" alt="Forward button" onclick='changeMode();'>		
		</div>
		<div class="buttons">
			<img class="start" alt="Start button" onclick="startTheGame()">
			<img class="quit" alt="Quit button" onclick="quit();">
		</div>
	</div>
	
	<div class="errorMessage" id="list">
				<textarea id="error1" title="Game output" ReadOnly="ReadOnly"></textarea>
				<br>
				<img id="showReplay" alt="Replay button" onclick="replay()">
	</div>
	
	
	
	
</div>
</body>
</html>